import Vue from 'vue'
import App from './App'
import router from './router'

// 引用 mui
import '../node_modules/mui-master/dist/css/mui.min.css'

// 使用 vant-ui
import '../node_modules/vant/lib/index.css'
import { Button, NavBar, Icon, Tabbar, TabbarItem, Swipe, SwipeItem, 
  Lazyload, Grid, GridItem, GoodsAction, GoodsActionIcon, GoodsActionButton, 
  Card, SubmitBar, Checkbox,CheckboxGroup } from 'vant';
//Button 按钮 ,NavBar 导航栏, Icon 图标,Tabbar, TabbarItem 标签栏 ,Swipe, SwipeItem 轮播图,Grid, GridItem宫格, List 列表
Vue.use(Button).use(NavBar).use(Icon)
  .use(Tabbar).use(TabbarItem).use(Swipe).use(SwipeItem)
  .use(Lazyload).use(Grid).use(GridItem).use(GoodsAction)
  .use(GoodsActionIcon).use(GoodsActionButton).use(Card)
  .use(SubmitBar).use(Checkbox).use(CheckboxGroup );

//使用 axios 获取api
import axios from 'axios'
Vue.prototype.$ajax = axios

//导入vuex
import Vuex from 'vuex'
Vue.use(Vuex)

Vue.config.productionTip = false

//导入格式化时间的插件
import moment from 'moment'
Vue.filter('dataFormat', function (dataStr, pattern = "YYYY-MM-DD HH:MM:SS") {
  return moment(dataStr).format(pattern)
})

// 缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 创建 store 实例
const store = new Vuex.Store({
  state: {
    //购物车中商品的数据用数组储存,localStorage浏览器本地储存器
    cart: JSON.parse(localStorage.getItem('cart') || ('[]'))
  },
  mutations: {
    AddToCart(state, goodsinfo) {
      var flag = false;
      state.cart.some(item => {
        if (item.id === goodsinfo.id) {
          item.count += goodsinfo.count;
          flag = true;
          return true;
        }
      })
      if (!flag) {
        state.cart.unshift(goodsinfo)
      }
      //更新cart之后,把数组存到本地的数据库 loaclStorage
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    Update(state, goodsinfo) {
      state.cart.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })
      localStorage.setItem('cart', JSON.stringify(state.cart))
    },
    updateGoodsSelected(state, info) {
      state.cart.some(item => {
        if (item.id == info.id) {
          item.selected = info.selected
        }
      })
      // 把最新的 所有购物车商品的状态保存到 store 中去
      localStorage.setItem('cart', JSON.stringify(state.cart))
    }
  },
  getters: { //this.$store.getters.***
    getnum(state){ //获取购物车总件数
        var num = 0;
        state.cart.forEach(item => {
            num += item.count;
        })
        return num;
    },
    getcount(state){ //获取单个商品件数
        var list = {};
        state.cart.forEach(item => {
            list[item.id] = item.count;
        })
        return list;
    },
    getGoodsSelected(state) { //获取商品开关
        var o = {}
        state.cart.forEach(item => {
          o[item.id] = item.selected
        })
        return o
    },
    getGoodsCountAndAmount(state){
        var o = {
            count: 0, //勾选的数量
            amount: 0, //勾选的总价
        }
        state.cart.forEach(item => {
            if(item.selected){
                o.count += item.count;
                o.amount += item.price * item.count
            }
        })
        return o;
    }
}
})
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store
})
